<script setup lang="ts">
import { ref } from "vue";
import utils from '../../components/utils/utils.js'
import MTable from '../../components/structure/MTable.vue'

const data = [
    {name:'宁波银行',id:1,amount:100},{name:'鄞州银行',id:1,amount:188},{name:'宁波银行',id:1,amount:88},
    {name:'浙江银行',id:1,amount:7700},{name:'宁波银行',id:1,amount:200},{name:'浙商银行',id:1,amount:268},
    {name:'西湖银行',id:1,amount:231},{name:'南湖银行',id:1,amount:62},{name:'浙商银行',id:1,amount:268},
    {name:'浙江银行',id:1,amount:14},{name:'西湖银行',id:1,amount:2626200},{name:'百度银行',id:1,amount:626},
    {name:'宁波银行',id:1,amount:100},{name:'鄞州银行',id:1,amount:5436},{name:'宁波银行',id:1,amount:88},
    {name:'浙江银行2',id:1,amount:774010},{name:'宁波银行',id:1,amount:5435},{name:'浙商银行',id:1,amount:268},
    {name:'西湖银行',id:1,amount:41},{name:'南湖银行',id:1,amount:200},{name:'浙商银行',id:1,amount:26},
    {name:'浙江银行',id:1,amount:4124},{name:'西湖银行',id:1,amount:200},{name:'百度银行',id:1,amount:268},
    {name:'宁波银行',id:1,amount:4124},{name:'鄞州银行',id:1,amount:188},{name:'宁波银行',id:1,amount:2656},
    {name:'浙江银行',id:1,amount:4124},{name:'宁波银行',id:1,amount:626},{name:'浙商银行',id:1,amount:268},
    {name:'西湖银行',id:1,amount:412},{name:'南湖银行',id:1,amount:200},{name:'浙商银行1',id:1,amount:268},
    {name:'浙江银行',id:1,amount:43432},{name:'西湖银行',id:1,amount:200},{name:'百度银行',id:1,amount:268},
]
utils.groupByKey(data,'name')

const perPage = ref(5)
const currentPage = ref(0)
const totalPage = Math.ceil(data.length/perPage.value)
const tableData = ref(data.slice(currentPage.value * perPage.value, (currentPage.value+1)*perPage.value))
const nextPageHandle = function(){
    if( currentPage.value < totalPage ){
        currentPage.value ++
    }
    tableData.value = data.slice(currentPage.value * perPage.value, (currentPage.value+1)*perPage.value)
}
const lastPageHandle = function(){
    if( currentPage.value > 1 ){
        currentPage.value --
    }
    tableData.value = data.slice(currentPage.value * perPage.value, (currentPage.value+1)*perPage.value)
}
</script>

<template>
    <main>
        <span>测试前端分组排序并分页功能</span>
        <div v-for="(item,index) in tableData" :key="index">
            <span>{{index}}</span><span>{{item.name}}</span><span>{{item.amount}}</span>
        </div>
        <div>每页显示：<button @click="perPage.value=5">5</button><button @click="perPage.value=10">10</button></div>
        <button @click="lastPageHandle">上一页</button>
        <button @click="nextPageHandle">下一页</button>
    </main>
    <div>
        <MTable/>
    </div>
</template>

<style lang="less" scoped>

</style>